<template>
	<view>
		<u-navbar back-text="返回" title="职位列表" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 头部选择职位 -->
		<view class="top-box">
			<view class="inlin-box">
				<view class="item" @click="showType=true">
					{{ jobType }}
					<image src="../../../static/images/home/selecticon.png" mode=""></image>
				</view>
				<view class="item" @click="showCity=true">
					{{ city }}
					<image src="../../../static/images/home/selecticon.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 头部选择职位 -->
		<!-- 底部内容 -->
		<view class="job-box">
			<view class="job-item">
				<view class="item-title">
					<view class="head-box">
						<view class="head-img">
							<image src="../../../static/images/develop/headimg.png" mode=""></image>
						</view>
						<image src="../../../static/images/home/authicon.png" mode=""></image>
					</view>
					<view class="head-right">
						<view class="name-box">
							王建国 <text>
								找工作
							</text>
						</view>
						<view class="grade-box">
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="job-name">
					工种：<text>
						塔吊司机
					</text>
				</view>
				<view class="user-introduce">
					自我介绍：本人找工作，从事项目工地设备垂直运输管理（塔吊，电梯）工作已经5年了备垂直运输管理（塔吊，电梯）工作已经5备垂直运输管理（塔吊，电梯）工作已经5
				</view>
				<view class="job-name job-address">
					期望工作地：：<text>
						成都市
					</text>
				</view>
				<view class="item-foot">
					<view class="item-left-btn" @click="goAppraise">
						评价
					</view>
					<view class="item-right-btn">
						确定入职
					</view>
				</view>
				<!-- <view class="working-time">
					用工时间前8小时可以点击
				</view> -->
			</view>
			<view class="job-item">
				<view class="item-title">
					<view class="head-box">
						<view class="head-img">
							<image src="../../../static/images/develop/headimg.png" mode=""></image>
						</view>
						<image src="../../../static/images/home/authicon.png" mode=""></image>
					</view>
					<view class="head-right">
						<view class="name-box">
							王建国 <text>
								找工作
							</text>
						</view>
						<view class="grade-box">
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							<image src="../../../static/images/common/grade-icon.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="job-name">
					工种：<text>
						塔吊司机
					</text>
				</view>
				<view class="user-introduce">
					自我介绍：本人找工作，从事项目工地设备垂直运输管理（塔吊，电梯）工作已经5年了备垂直运输管理（塔吊，电梯）工作已经5备垂直运输管理（塔吊，电梯）工作已经5
				</view>
				<view class="job-name job-address">
					期望工作地：：<text>
						成都市
					</text>
				</view>
				<view class="item-foot">
					<view class="item-left-btn" @click="goAppraise">
						评价
					</view>
					<view class="item-right-btn">
						确定入职
					</view>
				</view>
				<!-- <view class="working-time">
					用工时间前8小时可以点击
				</view> -->
			</view>
		</view>
		<!-- 底部内容 -->
		<u-picker v-model="showCity" mode="region" :params="params" :default-region="['四川省', '成都市']" @confirm="selectCity"></u-picker>
		<u-select v-model="showType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default{
		mixins:[multipleMixin],
		data(){
			return{
				showCity:false,
				showType:false,
				city: '区域',
				jobType:'塔吊司机'
			}
		},
		methods:{
			selectJobType(e) {
				this.jobType = e[2].label
			},
			selectCity(e) {
				this.city = e.city.label;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-box{
		width: 100%;
		padding: 25rpx 30rpx 0;
		.inlin-box{
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-bottom: 1rpx solid rgba(201,201,201,1);
			padding-bottom: 30rpx;
			.item{
				width: 50%;
				text-align: center;
				line-height: 36rpx;
				font-size:26rpx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				opacity:1;
				image{
					width: 24rpx;
					height: 12rpx;
					margin-left: 14rpx;
					margin-bottom: 4rpx;
				}
				&:first-child{
					border-right: 1rpx solid rgba(201,201,201,1);
				}
			}
		}
	}
	.job-box{
		width: 100%;
		margin-top: 37rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.job-item{
			margin-top: 30rpx;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background:rgba(255,255,255,1);
			box-shadow:0px 8rpx 20rpx rgba(0,0,0,0.1);
			opacity:1;
			border-radius:20rpx;
			.item-title{
				display: flex;
				margin-bottom: 40rpx;
				.head-box{
					position: relative;
					.head-img{
						width: 75rpx;
						height: 75rpx;
						image{
							width: 75rpx;
							height: 75rpx;
							border-radius: 50%;
						}
					}
					image{
						position: absolute;
						bottom: -13rpx;
						right: -12rpx;
						width: 24rpx;
						height: 26rpx;
					}
				}
				.head-right{
					margin-left: 40rpx;
					.name-box{
						font-size:32rpx;
						font-weight:bold;
						line-height:43rpx;
						color:rgba(51,51,51,1);
						opacity:1;
						text{
							display: inline-block;
							margin-left: 20rpx;
							margin-top: 4rpx;
							padding: 6rpx 10rpx;
							background:rgba(0,204,204,1);
							border-radius:60rpx;
							font-size:22rpx;
							font-weight:400;
							line-height:20rpx;
							color:rgba(255,255,255,1);
							opacity:1;
						}
					}
					.grade-box{
						display: flex;
						margin-top: 14rpx;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 14rpx;
						}
					}
				}
			}
			.job-name{
				font-size:22rpx;
				font-weight:bold;
				line-height:30rpx;
				color:rgba(153,153,153,1);
				opacity:1;
				text{
					font-size:26rpx;
					font-weight:bold;
					line-height:35rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
			.user-introduce{
				margin-bottom: 20rpx;
				margin-top: 14rpx;
				width: 100%;
				font-size:24rpx;
				font-weight:400;
				line-height:32rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.job-address{
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(223,223,223,1);
			}
			.item-foot{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				.item-left-btn{
					width:240rpx;
					height:80rpx;
					border:1rpx solid rgba(211,176,104,1);
					opacity:1;
					border-radius:8rpx;
					text-align: center;
					line-height: 80rpx;
					font-size:28rpx;
					font-weight:bold;
					color:rgba(211,176,104,1);
					opacity:1;
				}
				.item-right-btn{
					width:240rpx;
					height:80rpx;
					background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
					opacity:1;
					border-radius:8rpx;
					text-align: center;
					line-height: 80rpx;
					font-size:28rpx;
					font-weight:bold;
					color:rgba(255,255,255,1);
					opacity:1;
				}
			}
			.working-time{
				margin-top: 6rpx;
				font-size:22rpx;
				font-weight:400;
				line-height:30rpx;
				color:rgba(255,0,0,1);
				opacity:1;
			}
		}
	}
</style>
